import {Component, inject} from '@angular/core';
import {CommonModule} from '@angular/common';
import {LayoutService} from '../../services/layout.service';
import {TransformService} from '../../services/transform.service';
import {TablesService} from '../../services/tables.service';
import {NotesService} from '../../services/notes.service';
import {AreasService} from '../../services/areas.service';
import {ToolbarComponent} from '../toolbar/toolbar.component';
import {TableListComponent} from '../table-list/table-list.component';
import {DragService} from '../../services/drag.service';
import {SaveStateService} from '../../services/save-state.service';

@Component({
  selector: 'app-workspace',
  standalone: true,
  imports: [CommonModule, ToolbarComponent, TableListComponent],
  templateUrl: './workspace.component.html',
  styleUrl: './workspace.component.css'
})
export class WorkspaceComponent {
  layoutService = inject(LayoutService);
  transformService = inject(TransformService);
  tablesService = inject(TablesService);
  notesService = inject(NotesService);
  areasService = inject(AreasService);
  saveStateService = inject(SaveStateService)
  // 拖动
  dragService = inject(DragService);

  protected readonly Math = Math;

  zoomIn() {
    this.transformService.zoom(1.2);
  }

  zoomOut() {
    this.transformService.zoom(0.8);
  }

  resetZoom() {
    this.transformService.setTransform({zoom: 1});
  }

  resetPosition() {
    this.transformService.setTransform({x: 0, y: 0});
  }

  // 添加拖拽相关方法
  onMouseDown(event: MouseEvent, id: string, type: 'table' | 'note' | 'area', currentX: number, currentY: number) {
    event.preventDefault();
    const rect = (event.target as HTMLElement).getBoundingClientRect();
    const transform = this.transformService.transform();

    // 计算相对于画布的偏移量
    const offsetX = (event.clientX - rect.left) / transform.zoom;
    const offsetY = (event.clientY - rect.top) / transform.zoom;

    this.dragService.startDrag(id, type, currentX, currentY, offsetX, offsetY);

    // 添加全局事件监听
    const onMouseMove = (e: MouseEvent) => this.onMouseMove(e);
    const onMouseUp = () => {
      this.onMouseUp();
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    };

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  }

  onMouseMove(event: MouseEvent) {
    const dragState = this.dragService.dragState();
    if (!dragState.isDragging || !dragState.draggedItem) return;

    const transform = this.transformService.transform();
    const canvasRect = document.querySelector('.canvas-container')?.getBoundingClientRect();

    if (!canvasRect) return;

    // 计算相对于画布的鼠标位置
    const mouseX = (event.clientX - canvasRect.left - transform.x) / transform.zoom;
    const mouseY = (event.clientY - canvasRect.top - transform.y) / transform.zoom;

    const newPosition = this.dragService.updateDrag(mouseX, mouseY);

    if (newPosition) {
      const {id, type} = dragState.draggedItem;

      // 根据类型更新位置
      switch (type) {
        case 'table':
          this.tablesService.updateTable(id, {x: newPosition.x, y: newPosition.y});
          break;
        case 'note':
          this.notesService.updateNote(id, {x: newPosition.x, y: newPosition.y});
          break;
        case 'area':
          this.areasService.updateArea(id, {x: newPosition.x, y: newPosition.y});
          break;
      }
    }
  }

  onMouseUp() {
    this.dragService.endDrag();
    this.saveStateService.markUnsaved();
  }

}
